import {Divider, Grid, List, ListItem} from "@material-ui/core";
import * as React from "react";
import {Link} from "react-router-dom";
import ActionBar from "../../components/ActionBar";

interface Schedule {
    id: string,
    date: string,
    week: string,
    time: string
}

interface Props {
    id: string,
    detail: any,
    schedule: Schedule[],
    moreClick: (data: any) => void,
    doctor:any
}

const scheduleDefault = [
    {
        date: "2017-6-1",
        id: "1",
        time: "上午",
        week: "星期一",
    },
    {
        date: "2017-6-2",
        id: "2",
        time: "下午",
        week: "星期二",
    },
];

const DoctorSourceList = ({id, detail, schedule = scheduleDefault, moreClick,doctor}: Props) => {
    return <List key={id} subheader={<div>{detail}</div>}>
        {
            schedule.map((each, index) => {
                const {id, date, week, time} = each;
                return <ListItem key={id}>
                    <Grid container={true}>
                        <Grid xs={12} item={true}>
                            <ActionBar link={
                                <Link to={{
                                    pathname: "/appointment/confirm",
                                    state: {
                                        doctor,
                                        source:each
                                    }
                                }}>预约</Link>
                            }>
                                <span>{date}</span><span>{week}</span><span
                                style={{margin: "0 24px 0 24px "}}>{time}</span>
                            </ActionBar>
                        </Grid>
                        {index !== schedule.length - 1 ?
                            <Grid item={true} xs={12} style={{margin: "12px 0 0 0"}}><Divider/></Grid> : null}
                    </Grid>
                </ListItem>;
            })
        }
        <ListItem>
            <div style={{textAlign: "center", width: "100%"}}>
                <span onClick={moreClick}>更多</span>
            </div>
        </ListItem>
    </List>;
};
export default DoctorSourceList;
